import utils from './utils'

class DOMOperator {
  /**
   * 初始化DOM控制器
   */
  constructor(bridge) {
    this.bridge = bridge
    this.elementState = new Map()
    console.log('DOMOperator初始化')
  }

  /**
   * 创建转录按钮
   * @param {MediaElement} element - 媒体元素
   * @returns {HTMLElement} 控制按钮元素
   */
  createTransactionButton(element) {
    console.log('开始注入转录按钮到元素:', element)

    // 检查元素是否已经有控制按钮
    if (element.parentElement.querySelector('.wa2t-btn-container')) {
      console.log('元素已有转录按钮，跳过')
      return
    }
    // 创建控制按钮容器
    const container = document.createElement('div')
    container.className = 'wa2t-btn-container'
    // 创建转录按钮
    const transcribeButton = document.createElement('button')
    transcribeButton.className = 'wa2t-btn'
    transcribeButton.innerHTML = '转录'

    // 添加按钮到容器
    container.appendChild(transcribeButton)

    // 确保父元素有相对定位
    const parentElement = element.parentElement
    parentElement.style.position = 'relative'

    // 将容器添加到父元素
    parentElement.appendChild(container)

    // 点击转录按钮时,请求后台启动转录
    transcribeButton.addEventListener('click', (e) => {
      e.stopPropagation()
      e.preventDefault()
      this.bridge.send({
        event: 'ask-for-transcription',
        to: 'background',
        payload: {
          port: this.bridge.portName,
          element: utils.extractMetadata(element),
        },
      })
    })

    // 阻止双击事件冒泡
    transcribeButton.addEventListener('dblclick', (e) => {
      e.stopPropagation()
      e.preventDefault()
    })

    console.log('控制按钮已注入')
  }
}

export default DOMOperator
